To use IPython widgets in the notebook, the widget namespace needs to be imported.



In [1]:

    
from IPython.html import widgets # Widget definitions
from IPython.display import display # Used to display widgets in the notebook

Basic Widgets

IPython comes with basic widgets that represent common interactive controls. These widgets are

CheckboxWidget
ToggleButtonWidget
FloatSliderWidget
BoundedFloatTextWidget
FloatProgressWidget
FloatTextWidget
ImageWidget
IntSliderWidget
BoundedIntTextWidget
IntProgressWidget
IntTextWidget
ToggleButtonsWidget
RadioButtonsWidget
DropdownWidget
SelectWidget
HTMLWidget
LatexWidget
TextareaWidget
TextWidget
ButtonWidget

A few special widgets are also included, that can be used to capture events and change how other widgets are displayed. These widgets are

ContainerWidget
PopupWidget
AccordionWidget
TabWidget

To see the complete list of widgets, one can execute the following



In [2]:

    
[widget for widget in dir(widgets) if widget.endswith('Widget')]









    Out[2]:





['AccordionWidget',
 'BoundedFloatTextWidget',
 'BoundedIntTextWidget',
 'ButtonWidget',
 'CheckboxWidget',
 'ContainerWidget',
 'DOMWidget',
 'DropdownWidget',
 'FloatProgressWidget',
 'FloatSliderWidget',
 'FloatTextWidget',
 'HTMLWidget',
 'ImageWidget',
 'IntProgressWidget',
 'IntSliderWidget',
 'IntTextWidget',
 'LatexWidget',
 'PopupWidget',
 'RadioButtonsWidget',
 'SelectWidget',
 'TabWidget',
 'TextWidget',
 'TextareaWidget',
 'ToggleButtonWidget',
 'ToggleButtonsWidget',
 'Widget']

The basic widgets all have sensible default values. Create a FloatSliderWidget without displaying it:



In [3]:

    
mywidget = widgets.FloatSliderWidget()

Constructing a widget does not display it on the page. To display a widget, the widget must be passed to the IPython display(object) method or must be returned as the last item in the cell. mywidget is displayed by



In [4]:

    
display(mywidget)



In [5]:

    
mywidget

It's important to realize that widgets are not the same as output, even though they are displayed with display. Widgets are drawn in a special widget area. That area is marked with a close button which allows you to collapse the widgets. Widgets cannot be interleaved with output. Doing so would break the ability to make simple animations using clear_output.

Widgets are manipulated via special instance attributes (traitlets). The names of these traitlets are listed in the widget's keys attribute (as seen below). A few of these attributes are common to most widgets. The basic attributes are value, description, visible, and disabled. _css and _view_name are private attributes that exist in all widgets and should not be modified.



In [6]:

    
mywidget.keys









    Out[6]:





['_view_name',
 'orientation',
 'min',
 'max',
 '_css',
 'value',
 'disabled',
 'visible',
 'step',
 'description']

Changing a widget's attribute will automatically update that widget everywhere it is displayed in the notebook. Here, the value attribute of mywidget is set. The slider shown above updates automatically with the new value. Syncing also works in the other direction - changing the value of the displayed widget will update the property's value.



In [7]:

    
mywidget.value = 25.0

After changing the widget's value in the notebook by hand to 0.0 (sliding the bar to the far left).



In [8]:

    
mywidget.value









    Out[8]:





25.0

Widget values can also be set with kwargs during the construction of the widget (as seen below).



In [9]:

    
mysecondwidget = widgets.RadioButtonsWidget(values=["Item A", "Item B", "Item C"], value="Item A")
display(mysecondwidget)



In [10]:

    
mysecondwidget.value









    Out[10]:





'Item A'